import React, { Component } from "react"



class AddStudent extends Component {
  // 一个类必须有constructor()方法，如果创建类的时候，没有显示的定义该方法，一个空的 constructor()方法会被默认添加。
  // constructor() 函数返回一个全新的对象 所以渲染时直接使用this.handler
  constructor() {
    // AddStudent类继承Component 所以需要父类的构造方法也需要执行
    super()
    this.handler = this.handler.bind(this)
  }

  // 定义状态
  state = {
    number: '',
    name: '',
    sex: '男',
    age: '',
    college: '前端',
    hobbies: [
      {id: 1, title: '篮球', isChecked: false },
      {id: 2, title: '足球', isChecked: false },
      {id: 3, title: '网球', isChecked: false }
    ]
  }

  // 存储原始的默认状态
  // data ={  ...this.state } // 浅拷贝
  data = JSON.parse(JSON.stringify(this.state)) // 深拷贝hobbies里的数据
  // JSON.stringify是从一个对象中解析出字符串。 JSON.parse是从一个字符串中解析出json(键值对)


  // 表单数据处理
  handler(env) {
    // console.log(this) // this指向AddStudent
    // 获取到输入框输入的值 使用setState来做修改并将显示到页面上
    const props = env.target.name
    // console.log(props)
    this.setState({
      [props]: env.target.value
    },() => {
      // console.log(this.state.hobbies)
    })
  }

  // 处理复选框
  handleHobby(index, env) {
    // console.log(index)
    // console.log(env.target.checked)
    // this.state.hobbies[index].isChecked = env.target.checked
    const isChecked = env.target.checked
    const hobbies = [...this.state.hobbies]
    hobbies[index].isChecked = isChecked
    this.setState({
      hobbies
    },() =>{
      // console.log(hobbies)
    })
  }

  // 提交表单处理（this指向AddStudent）
  submit = (env) => {
    // 阻止默认跳转
    env.preventDefault()
    // console.log(this)
    // console.log(this.state)  //表单里的 hobbies 里面需要选中的结果的对象 过滤选中的对象需要过滤
    // 1.筛选出被选中的hobbies的对象
    const hobbies = this.state.hobbies
    .filter(hobby => hobby.isChecked)
    .map(hobby => hobby.title)
    // console.log(hobbies)
    // 2.组合数据
    const formCData = {...this.state, hobbies}
    // console.log(formCData)
    // 3.将当前数据 通过调用父级的处理数据操作（在父级中已给子组件处理数据的操做）传给上层组件
    // this.props.addList(formCData) //异步操作

    // 4.提交完成之后 再把原始的默认state状态 设置到界面上展示
    // console.log(this.data)
    // this.setState(this.data) // 同步操作


    // 将这个同步操作放到 addList的函数中去执行 然后把第二个参数传递到父组件
    this.props.addList(formCData, () => {this.setState(this.data)})

  }
  
  render () {
    return (
      <div className="col-md-5">
        <form onSubmit={this.submit}>
          <div className="form-group">
            <label>学号</label>
            <input name="number" value={this.state.number} onChange={this.handler}
            type="number" className="form-control" placeholder="请输入学号" />
          </div>
          <div className="form-group">
            <label>姓名</label>
            <input name="name" value={this.state.name} onChange={this.handler} 
            type="text" className="form-control" placeholder="请输入姓名" />
          </div>
          <div className="form-group">
            <label>性别&nbsp;&nbsp;</label>
            <label className="checkbox-inline">
                <input name="sex" type="radio" value="男" checked={this.state.sex === '男'}
                onChange={this.handler} /> 男
            </label>
            <label className="checkbox-inline">
                <input name="sex" type="radio" value="女" checked={this.state.sex === '女'}
                onChange={this.handler} /> 女
            </label>
          </div>
          <div className="form-group">
            <label>年龄</label>
            <input name="age" value={this.state.age} onChange={this.handler}
            type="text" className="form-control" placeholder="请输入年龄" />
          </div>
          {/* <div className="form-group">
            <label>入学时间</label>
            <input className="form-control" type="date" />
          </div> */}
          <div className="form-group">
            <label>爱好</label>
            {
              this.state.hobbies.map ((hobby, index) => {
                return (
                  <div className="checkbox" key={hobby.id}>
                    <label>
                      <input type="checkbox" checked = {hobby.isChecked} 
                      onChange={this.handleHobby.bind(this, index)}/>{hobby.title}
                    </label>
                  </div>
                )
              })
            }
            
          </div>
          <div className="form-group">
            <label>所属学院</label>
            <select className="form-control" value={this.state.college}
            name="college" onChange={this.handler}>
                <option value="大前端">大前端</option>
                <option value="Java">Java</option>
                <option value="python">python</option>
            </select>
          </div>
          <button type="submit" className="btn btn-default">添加</button>
        </form>
      </div>
    )
  }
}

export default AddStudent
// 筛选之前的
// 1.将数据源渲染到界面上 遍历循环 
// 2.数据源的 isChecked属性与表单进行绑定 defaultChecked ={hobby.isChecked}
// 3.绑定之后的数据在表单中 选中及选中取消时 在对应修改数据源中的选中状态  
// 展开state.hobbies  定义isChecked= env.target.checked 将选中或取消操作时修改数据源中的选中状态
